<template>
  <h1 ref="refH1">ref</h1>
  <!-- <img ref="refH1"/> -->
  <button @click="hClick">click</button>
</template>
<script setup lang="ts">
// document.createElement('img')
import { ref } from 'vue'
// const r1 = ref<泛型>()
// 这里的泛型用来决定r1.value的数据类型

// 有两种状态
//  - 初始是null
//  - 页面加载完成，它就是 HTMLHeadElement
const refH1 = ref<null | HTMLHeadElement>(null)

const hClick = () => {
  // 获取h1的innerHTML
  // {name ?:number}  这里的?是ts中的语法，表示可选属性

  // ? 是：可选链操作符。它是es6中的语法
  console.log(refH1.value?.innerHTML)
  // if(refH1.value){
  //   console.log(refH1.value.innerHTML)
  // }else {
  //   console.log(undefined)
  // }
  // console.log(refH1.value.innerHTML)
}
</script>